<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书详情页</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT" crossorigin="anonymous"></script>

</head>
<body>
    <div th:replace="fragments/header :: navbar"></div>
    <div class="container pt-3">
        <div class="row justify-content-center">
            <div class="col-12 text-end">
                <button class="btn btn-info" onclick="history.back()">
                    <i class="bi bi-arrow-90deg-left">&nbsp;</i>
                    <span>返回</span>
                </button>
            </div>
            <div class="col-md-4 ">
                <p>
                    <img width="400px" th:src="@{|/bookImage?bookId=${book.bookId}|}" alt="图书图片">
                </p>
                <a class="btn btn-primary text-center" th:data-book-id="${book.bookId}"
                   th:href="@{'/order/addBook/{bookId}'(bookId=${book.bookId})}">加入购物车</a>
            </div>
            <div class="col-md-5">
                <h1>[[${book.bookName}]]</h1>
                <dl class="row">
                    <dt class="col-6 text-secondary">图书名称</dt>
                    <dd class="col-6">[[${book.bookName}]]</dd>
                    <dt class="col-6 text-secondary">图书作者</dt>
                    <dd class="col-6">[[${book.bookAuthor}]]</dd>
                    <dt class="col-6 text-secondary">出版社</dt>
                    <dd class="col-6">[[${book.bookPublisher}]]</dd>
                    <dt class="col-6 text-secondary">图书ISBN</dt>
                    <dd class="col-6">[[${book.bookIsbn}]]</dd>
                    <dt class="col-6 text-secondary">图书价格</dt>
                    <dd class="col-6">[[${book.bookPrice}]]</dd>
                </dl>
                <h4>图书简介</h4>
                <p align="justify">[[${book.bookDescription}]]</p>
            </div>
        </div>
    </div>
</body>
</html>